<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="start">开始时间</button>
    <button id="stop">停止时间</button>
    <h2 id="shouwtime"></h2>


    <script>
        // 全局 timeID
        var t;
        // 获取按钮
        var start = document.getElementById('start')
        var stop2 = document.getElementById('stop')
        // 开始按钮的执行事件
        start.addEventListener('click',stime);
        // 结束按钮事件
        stop2.addEventListener('click',function(){
            // 清除延迟事件
            clearTimeout(t);
            // 恢复按钮
            start.removeAttribute('disabled')
        });
        // 开始显示的事件 获取时间
        function stime(){
            // 禁用按钮
            start.setAttribute('disabled','disabled')
            // 获取时间
            var date = new Date();
            var hour = date.getHours();
            var minute = date.getMinutes();
            var second = date.getSeconds();
            // 格式化时间
            var time = hour + ":" + minute + ":" +second;
            // 显示时间
            var showtime = document.getElementById("shouwtime");
            showtime.textContent = time;
            // 设置延迟事件
            t = setTimeout(stime,1000);


        }





    </script>
</body>
</html>